<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <div id="box"></div>
    <script>
        var data = {
            name: '张三',
            age:18,
            info: {
                address: '北京'
            }
        }
        // var res = {}
        // // 数据**
        // Object.defineProperty(res,'name',{
        //     get(){
        //         return data.name;
        //     },
        //     set(val){
        //         data.name = val;
        //         document.querySelector('#box').innerHTML = val;

        //     }
        // });


        // res.name = '杨璐';
        // console.log(res);
        // console.log(data);

        function observer(origin,fn){
            // origin 是原数据 
            // fn 是你**以后想做的事情 
            //**目标 

            const target = {}
            // 劫持的目标 把原数据的所有属性都复制到目标上
            for(let k in origin){
                Object.defineProperty(target,k,{
                    get(){
                        return origin[k];
                    },
                    set(val){
                        origin[k] = val;
                        fn(target); // 这是你**以后想做的事情
                        // 把**后的数据传递过去
                    }
                });

            }
            return target;
           

        }



       var res =  observer(data,function(res){
            document.querySelector('#box').innerHTML = `你好${res.name} 你今年${res.age}岁了,你的地址是${res.info.address}`;
        });

         document.querySelector('input').addEventListener('input',function(){
            res.age = this.value;
         });
    </script>
</body>
</html>